<template>
  <div v-dialogDrag>
    <el-dialog
      title="代理人详情"
      v-model="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-table :data="agentList" height="300" stripe style="width: 100%">
        <el-table-column
          align="center"
          v-for="{ label, prop } in col"
          :key="prop"
          :prop="prop"
          :label="label"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue'
import { $select } from '@/service/common'
import { pagingConfig } from '@/assets/common'
import { col } from '@/views/rariffMaintenance/Basics/components/alert/config'

export default defineComponent({
  name: 'AgentList',
  emits: ['handleClose'],
  props: {
    policyId: {
      type: Number,
      required: true
    },
    agentUrlIndex: {
      type: Number,
      default: 0
    }
  },
  setup(prop, { emit }) {
    const dialogVisible = ref(true)
    const pagingConf = reactive({
      ...pagingConfig
    })
    // 关闭
    const handleClose = () => {
      emit('handleClose')
    }

    // data
    const agentList = ref()

    onMounted(() => {
      handleSearch()
    })

    const handleSizeChange = (val: number) => {
      pagingConf.pageSize = val
      handleSearch()
    }
    const handleCurrentChange = (val: number) => {
      pagingConf.currentPage = val
      handleSearch()
    }

    // 查询
    const handleSearch = async () => {
      const { data } = await $select.selectAgentList({
        policyId: prop.policyId,
        page: pagingConf.pageSize,
        size: pagingConf.currentPage,
        agentUrlIndex: prop.agentUrlIndex
      })
      if (prop.agentUrlIndex === 1) {
        agentList.value = data.records
        pagingConf.total = data.total
      } else {
        agentList.value = data ?? []
        pagingConf.total = data?.length ?? 0
      }
    }

    return {
      dialogVisible,
      agentList,
      col,
      ...toRefs(pagingConf),
      handleClose,
      handleSizeChange,
      handleCurrentChange
    }
  }
})
</script>

<style scoped lang="less"></style>
